<template>
	<view class="container">
		<com-head textTit="购买会员卡" :typeVal="1" :scrollTop="scrollTop"></com-head>
		
		<view class="list">
		   <image :src="moneyList.img" mode="aspectFill"></image>
		   <view class="content">
			   <view class="vipPrice" v-if="vipType == 0">享受折扣{{moneyList.discount || 0}}折</view>
		   	  <view class="head">
		   	  	  <text class="price"><text class="pls"><text>¥</text>{{moneyList.price || 0}}</text> 
				  <!-- <text v-if="ele.give_price*1">送{{Number(500).toFixed(0)}}</text> -->
				  </text>
		   	  </view>
			  <view class="bottom">
					<view class="storeList" v-if="vipType == 0">
						{{toStore.cate_type == 2 ? "通用门店: 全部 " : ("指定门店: " + moneyList.store.title)}}
					</view>
					<view class="storeList" v-if="vipType == 1">
						全平台通用
					</view>
			  </view>
		   </view>
		</view>
		
		
		<view class="rechargeAmount">
			<!-- 充值金额 -->
			<view class="title">充值金额</view>
			<view class="moneyList">
				<!-- v-for="(ele,index) in moneyList" :key="index" activeIndex == index ? 'active' : ''  @click="chose(index)"-->
				<view class="list active">
					<view class="price">
						{{moneyList.price || 0}}元
						<view class="sendPrice" v-if="moneyList.give_price !== '0.00'">
							<view>送{{moneyList.give_price}}元</view>
						</view>
					</view>
				</view>
			</view>
			
			<!-- 充值信息 -->
			<view class="groupList" v-if="vipType == 0">
				<view class="item" @click="utlis.goUrl(`/pages/mine/selectStores`)">
					<text>充值门店</text>
					<view class="right">
						<text>{{makeStoreInfo.id ? makeStoreInfo.title : "请选择门店"}}</text>
						<u-icon name="arrow-right" color="#000000" size="28"></u-icon>
					</view>
				</view>
				<view class="item" v-if="staffData.length < 1" @click="utlis.goUrl(`/pages/mine/selectPersonal?type=1`)">
					<text>推荐人</text>
					<view class="right">
						<text v-if="makeTech.length" v-for="(ele,index) in makeTech" :key="index">{{ele.name}}（{{ele.number}}）</text>
						<text v-if="!makeTech.length">请选择员工</text>
						
						<u-icon name="arrow-right" color="#000000" size="28"></u-icon>
					</view>
				</view>
				<view class="item" v-else>
					<text>推荐人</text>
					<view class="right">
						<text v-for="(ele,index) in staffData" :key="index">{{ele.name}}（{{ele.number}}）</text>
					</view>
				</view>
			</view>
			
			<!-- 支付方式 -->
			<view class="groupList">
				<view class="item">
					<text>支付方式</text>
				</view>
				<view class="item">
					<view>
						<image class="image" src="//jiudao123.oss-cn-shanghai.aliyuncs.com/store/img/wx.png"></image>
						微信支付
						<image class="imgs" src="//jiudao123.oss-cn-shanghai.aliyuncs.com/store/img/good2.png"></image>
					</view>
				</view>
			</view>
			
			<!-- 购买 -->
			<view class="payBtn" @click="submit()">
				<view>确认购买</view>
			</view>
			
			<!-- 协议 -->
			<view class="agreement">
				<text @click="checkedFun" class="iconfont " :class="isRead ? 'icon-a-shijianbeifen' : 'icon-weixuanzhong' "> </text>
				<view class="right">
					我已阅读并同意 <text @click="show = true">《购卡协议》</text>
				</view>
			</view>
		</view>
		
		
		<!-- 购卡协议 -->
		<u-popup v-model="show" safe-area-inset-bottom mode="center" height="80%" border-radius="40" @close="close" closeable>
			<view class="specification">
				<rich-text :nodes="agreementObj.vip_agreement"/>
			</view>
		</u-popup>
		
	</view>
</template>
<script>
	export default {
		data() {
			return {
				show: false,
				isRead:false,
				activeIndex:0,
				moneyList:{},
				rowId: '',
				scrollTop: 0,
				agreementObj: {},
				staffData: [],
				vipType: 0
			}
		},
		onPageScroll(e){
			this.scrollTop = e.scrollTop
		},
		async onLoad({id, type}) {
			this.vipType = type
			this.rowId = id
			this.$u.vuex("makeTech", [])
			this.getvipFun()
			this.agreement()
			if (this.fid) {
				this.getStaff()
			}
		},
		methods: {
			async getStaff() {
				let {data,code} = await this.$u.api.getStaff({id: this.fid});
				if(code){
					this.staffData = data
					console.log(455, data)
				}
			},
			async agreement(){
				let {data,code} = await this.$u.api.agreement();
				if(code){
					this.agreementObj = data
				}
			},
			async submit() {
				if (!this.isRead) return this.toast('请阅读并同意《购卡协议》')
				
				let API = this.vipType == 0 ? this.$u.api.getbuyVip : this.$u.api.buySysVip
				
				let {code,data} = await API({
					store_id:this.store_id, 
					id: this.rowId,
					staff_id: this.makeTech.length ? this.makeTech[0].id : this.fid,
					share_user_id: this.share_user_id
				});
				if(code){
					this.vipHfPay(data)
				}
			},
			async vipHfPay(id) {
				uni.login({
					success: async (loginRes) => {
						let {code,data} = await this.$u.api.vipHfPay({
							id: id,
							code: loginRes.code
						});
						if(code){
							this.payFun(data)
						}
					}
				})
			},
			payFun(data) {
				var pls = data
				let that = this
				uni.requestPayment({
					provider: "wxpay",
					appid: pls.appId,
					timeStamp: pls.timeStamp,
					nonceStr: pls.nonceStr,
					package: pls.package,
					signType: pls.signType,
					paySign: pls.paySign,
					success(res) {
						if (res.errMsg == "requestPayment:ok") {
							that.toast("充值成功")
							setTimeout(() => {
								that.jump('/pages/mine/rechargeList?type=' + this.vipType)
							}, 500)
						}
					},
					fail(e) {
						if (e.errMsg == "requestPayment:fail cancel") {
							that.toast("充值已取消")
						} else {
							that.toast("充值失败" + e.errMsg)
						}
					},
				});
			},
			async getvipFun() {
				let {code,data} = await this.$u.api.getvip({store_id:this.store_id, id: this.rowId});
				if(code){
					this.moneyList = data
				}
			},
			checkedFun() {
				this.isRead = !this.isRead
			},
			chose(index){
				this.activeIndex = index
			}
		}
	}
</script>

<style lang="scss" scoped >
.container{
	padding: 50rpx 32rpx;
	.payBtn{
		width: 100%;
		margin: 0 auto;
		view{
			width: 686rpx;
			height: 96rpx;
			font-size: 32rpx;
			color: #FFFFFF;
			text-align: center;
			line-height: 96rpx;
			background:  linear-gradient(85deg, #50DCC2, #007664);
			border-radius: 48rpx  48rpx  48rpx  48rpx;
			margin: 100rpx 0 20rpx 0;
		}
	}
	.list{
		width: 686rpx;
		height: 350rpx;
		position: relative;
		margin-bottom: 30rpx;
		image{
			width: 686rpx;
			height: 350rpx;
			position: absolute;
			top: 0;
			z-index: 1;
			border-radius: 20rpx;
		}
		.content{
			width: 686rpx;
			height: 376rpx;
			position: absolute;
			top: 0;
			z-index: 2;
			padding: 30rpx 36rpx 36rpx 40rpx;
			.vipPrice{
				font-size: 32rpx;
				color: #AA5200;
				margin-bottom: 10rpx;
			}
			.discount{
				width: 100%;
				text-align: right;
				color: #FFFFFF;
				font-size: 36rpx;
			}
			.head{
				display: flex;
				justify-content: space-between;
				margin-bottom: 20px;
				// align-items: center;
				.price{
					font-size: 64rpx;
					font-weight: 500;
					color: #AA5200;
					line-height: 65rpx;
					text{
						margin-left: 24rpx;
						color: #AA5200;
						font-size: 64rpx;
						// margin-left: 14rpx;
					}
					.pls{
						margin-left: 0rpx !important;
						font-weight: bold;
					  background: -webkit-linear-gradient(left, #CD7122, #FDAD35);
					  -webkit-background-clip: text;
					  -webkit-text-fill-color: transparent;
					  background-clip: text;
					  text-fill-color: transparent;
						text{
							margin-left: 0rpx !important;
							margin-right: 10rpx;
						}
					}
				}
				.right{
					display: flex;
					align-items: center;
					color: #007664;
					font-size: 26rpx;
					position: absolute;
					top: 30rpx;
					right: 36rpx;
					text{
						margin-left: 13rpx;
					}
				}
				.t1{
					color: #A08761;
				}
				.t2{
					color: #90929C;
				}
				.t3{
					color: #C2A060;
				}
			}
			.bottom{
				display: flex;
				justify-content: space-between;
				align-items: center;
				font-size: 28rpx;
				color: #AA5200;
				margin-top: 120rpx;
				.storeList{
					width: 450rpx;
				}
				.buy{
					width: 185rpx;
					height: 65rpx;
					line-height: 65rpx;
					text-align: center;
					
					background: linear-gradient(85deg, #DB985A, #AA5200);;
					border-radius: 100rpx;
					color: #FFFFFF;
					font-size: 32rpx;
				}
			}
		}
	}
	
	.specification{
		width: 680rpx;
		background: #FFFFFF;
		border-radius: 16rpx 16rpx 16rpx 16rpx;
		padding: 40rpx;
	}
	
	.rechargeAmount{
		
		margin: 40rpx 0 44rpx 0;
		>.title{
			color: #666666;
			font-size: 26rpx;
			margin: 32rpx 0 20rpx 0;
		}
		.moneyList{
			display: flex;
			align-items: center;
			.list{
				width: 210rpx;
				height: 154rpx;
				background: #ffffff;
				border-radius: 16rpx;
				margin-right: 28rpx;
				position: relative;
				margin-bottom: 0;
				display: flex;
				align-items: center;
				justify-content: center;
				.sendPrice{
					width: 100%;
					height: 36rpx;
					text-align: center;
					margin-top: 10rpx;
					view{
						width: 100%;
						// height: 36rpx;
						text-align: center;
						// line-height: 36rpx;
						color: #999999;
						font-size: 24rpx;
						z-index: 9;
						line-height: 36rpx;
					}
				}
				.price{
					width: 100%;
					text-align: center;
					color: #4D5562;
					font-size: 36rpx;
					// position: absolute;
					// bottom: 26rpx;
					// left: 50%;
					// transform: translateX(-50%);
				}
			}
			.list:nth-child(3n+3){
				margin-right: 0;
			}
			.active{
				background-image: url('//jiudao123.oss-cn-shanghai.aliyuncs.com/store/img/bg11.png');
				background-size: cover; /* 背景图片覆盖整个页面 */
				  background-position: center; /* 背景图片居中 */
				 .price, .sendPrice{
					  color: #007664 !important;
				 }
			}
		}
		.groupList{
			width: 100%;
			padding: 0 32rpx;
			background-color: #FFFFFF;
			border-radius: 8rpx;
			margin: 49rpx 0 34rpx 0;
			.item{
				display: flex;
				align-items: center;
				justify-content: space-between;
				height: 96rpx;
				color: #333333;
				font-size: 26rpx;
				border-bottom: 1rpx solid rgba(142,142,142,.24);
				position: relative;
				.image{
					width: 33rpx;
					height: 33rpx;
					display: inline-block;
					position: relative;
					top: 5rpx;
					margin-right: 19rpx;
				}
				.imgs{
					width: 33rpx;
					height: 33rpx;
					display: inline-block;
					position: absolute;
					right: 0;
				}
				.right{
					font-size: 24rpx;
					display: flex;
					align-items: center;
					text{
						margin-right: 32rpx;
					}
				}
			}
			.item:last-child{
				border-bottom: 1rpx solid #F6F7FA;
			}
		}
	}
	.agreement{
		display: flex;
		align-items: center;
		justify-content: center;
		padding: 0 22rpx;
		width: 100%;
		.icon-weixuanzhong{
			color: #666666;
			font-size: 32rpx;
		}
		.icon-a-shijianbeifen{
			color: #007664;
			font-size: 32rpx;
			font-weight: bold;
		}
		.right{
			display: flex;
			align-items: center;
			color: #666666;
			font-size: 26rpx;
			margin-left: 14rpx;
			text{
				color: #007664;
			}
		}
	}
}
</style>
<style >
page{
	background-color: #F6F7FA;
}
</style>
